<template>
  <transition name="bounce">
    <section class="mui-content pd">
      <mh-header headName="我的匹配"> </mh-header>
      <div class="received">
        <h4 class="mui-text-center mh-mg-tb">已接受匹配</h4>
        <ul class="has-received flex">
          <li class="mui-text-center" v-for="item in receivedMatch" :key="item.id" @tap="matchDetail(item.id)">
            <div class="mh-pic-box md">
              <img :src="item.portrait" alt="头像">
            </div>
            <p class="u-name">{{item.nickname}}</p>
            <p class="u-info">{{item.age}}岁 | {{item.education}}学历 <span v-if='item.is_car==1'>| 有车</span></p>
          </li>
        </ul>
      </div>

      <div class="same-level mh-pd">
        <h4 class="mui-text-center">同级匹配</h4>
        <ul>
          <li class="flex" v-for="item in dataArr" :key="item.id" @tap="showAdvDialog = true">
            <div class="mh-pic-box sm">
              <img :src="item.portrait" alt="头像">
            </div>
            <div class="u-info-box">
            <p class="u-name">{{item.nickname}}</p>
            <p class="u-info">{{item.age}}岁 | {{item.education}}学历 <span v-if='item.is_car==1'>| 有车</span></p>
            </div>
          </li>
        </ul>
      </div>

      <div class="dialog mui-text-center" v-show="showAdvDialog">
        <div class="mui-backdrop" @tap="showAdvDialog = false"></div>
        <div class="dialog-inner">
          <div class="ic-smile">
            <img src="../../../assets/images/bg/bg_smile.png" alt="笑脸">
          </div>
          <p class="dialog-tip mh-pd-lr">您当前选择的为高级匹配 需补充差价哦！</p>
          <div class="dialog-btn">去补充</div>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "mind-match",
    data () {
      return {
        showAdvDialog: false,
        receivedMatch: [
          // {
          //   id: '1',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg',
          //   name: '会飞的鱼',
          //   age: 23,
          //   edu: '本科',
          //   car: 1
          // }
        ],
        dataArr: []
      }
    },
    methods: {
      matchDetail (id) {
        this.$router.push({
          path: '/explore/find/matchDetail',
          query: {
            id: id
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      //匹配列表
      MH_API.getTryst({

      }).then(res => {
        if (res.status === 200) {
          self.dataArr = res.data;
        }
      })

      //已接收列表
      MH_API.getTryst({
        status: 1
      }).then(res => {
        if (res.status === 200) {
          self.receivedMatch = res.data;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .received {border: 1px solid #fff;background-color: #fff;}
  .has-received {
    flex-wrap: wrap;
    li {
      width: 33%;
      margin-bottom: 1rem;
    }
  }
  .mh-pic-box {
    &.md {
      width: 5rem;
      height: 5rem;
      margin: 0 auto;
    }
    &.sm {
      width: 4rem;
      height: 4rem;
      margin: 0;
    }
    overflow: hidden;
    border-radius: 100%;
    img {width: 100%;}
  }
  .u-name {margin: .5rem 0;@include sc(1.5rem, #333)}
  .u-info {@include sc(1.2rem, #999)}
  .same-level {
    margin-top: 1rem;
    background-color: #fff;
    li {
      padding: 1rem 0;
      border-bottom: 1px solid #eee;
    }
  }
  .u-info-box {
    margin-left: 1rem;
  }
  .dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    .dialog-inner {
      width: 85%;
      @include center;
      background-color: #fff;
      border-radius: .5rem;
      z-index: 999;
      .ic-smile {
        padding: 3rem 0;
        img {width: 25%;}
      }
    }
    .dialog-tip {
      margin-bottom: 3rem;
      padding: 1rem 4.5rem;
      @include sc(1.6rem, #000);
    }
  }
  .dialog-btn {
    width: 100%;
    line-height: 4.5rem;
    background-image: linear-gradient(180deg, #dd65a1 0%, #fa625a 100%);
    @include sc(1.5rem, #fff)
  }
</style>
